<template>
    <p>这是Home页</p>
    <h1>js跳转</h1>
    <button @click="pushStr">push-字符串-跳转</button>
    <button @click="pushPath">push-路径-跳转</button>
    <button @click="pushPathQuery">push-字符串-query-跳转</button>
    <button @click="pushNameParams">push-命名路由-参数-跳转</button>
    <button @click="pushDyRouteByPath">动态路由-path-传参</button>
    <button @click="pushDyRouteMulParams">动态路由-多个入参</button>
    <button @click="updateVuexCount">修改count</button>
    <button @click="updateVuexCountByObj">修改count-对象方式</button>
    <button @click="getCount">actions-接口请求</button>
    <button @click="getCountByObj">actions-接口请求-对象方式</button>
    <button @click="moduleComGloMut">触发-moduleB-触发全局mutation</button>
    <button @click="moduleComGloAct">触发-moduleB-触发全局action</button>
    <h1>Vuex module</h1>
    <button @click="commitIncreaseA">触发-moduleA-muations</button>
    <button @click="commitAsyncIncreaseA">触发-moduleA-actions</button>
    <button @click="commitIncreaseB">触发-moduleB-muations</button>
    <button @click="commitAsyncIncreaseB">触发-moduleB-actions</button>

    <h1>命名空间</h1>
    <p>无命名空间</p>
    <p>访问 模块A中的state数据: {{ $store.state.a.countA }}</p>
    <p>访问 模块A中的getter数据: {{ $store.getters.countAA }}</p>
    <p>有命名空间</p>
    <p>访问 模块B中的state数据: {{ $store.state.b.countB }}</p>
    <p>访问 模块B中的getter数据: {{ $store.getters['b/countBB'] }}</p>
</template>

<script>
export default{
    methods:{
    commitIncreaseA(){
       this.$store.commit('increaseA')
     },
    commitAsyncIncreaseA(){
        this.$store.dispatch('asyncIncreaseA')
    },
     commitIncreaseB(){
        this.$store.commit('b/increaseB')
    },
    commitAsyncIncreaseB(){
        this.$store.dispatch('b/asyncIncreaseB')
    },
    pushStr(){
        this.$router.push('/about')
    },
    pushPath(){
        this.$router.push({path:'/about'})
    },
    pushPathQuery(){
        this.$router.push({path:'about',query:{name:'tom'}})
    },
    pushName(){
        this.$router.pish({name:'about'})
    },
    pushNameParams(){
        this.$router.push({path:'about',params:{name:'tom',id:1}})
    },
    pushDyRouteByName(){
        this.$router.push({name:'product',params:{id:456}})
    },
    pushDyRouteByPath(){
        const id = 123
        this.$router.push({path:'/product'+'/'+id})
    },
    pushDyRouteMulParams(){
        this.$router.push({name:'product',params:{id:123,name:'tom'}})
    },
    updateVuexCount(){
        this.$store.commit('incrementMut',{count:20})
    },
    updateVuexCountByObj(){
        this.$store.commit({
            type:'incrementMut',
            count:30
        })
    },
    getCount(){
        this.$store.dispatch('incrementAct',{count:200})
    },
    getCountByObj(){
        this.$store.dispatch({
            type:'incrementAct',
            count:200
        })
    },
    moduleComGloMut(){
        this.$store.dispatch('b/asyncGloBalMut',{count:1000})
    },
    moduleComGloAct(){
        this.$store.dispatch('b/asyncGloBalAct',{count:2000})
    }

},
mounted(){
    console.log("this.$route", this.$route);
    console.log("this.$router", this.$router);
}
}

</script>

<style>

</style>